/*
 * @Description  :
 * @Author       : BuGua
 * @Date         : 2021-08-06 14:36:48
 * @LastEditors  : BuGua
 * @LastEditTime : 2021-08-11 14:23:08
 */

import React, { FC, useEffect, useState, useRef } from 'react';
import { ConnectState, LoginLayoutProps, SubmitValProps } from '@/models/connect';
import { Form, Input, Button, Checkbox } from 'antd';
import { connect, useDispatch, Dispatch, useSelector } from 'umi';
import './index.less'
import MirrorButton from './MirrorButton';

const { Item } = Form;

const LoginPage: FC<LoginLayoutProps> = ({ dispatch }) => {

	const commit = useDispatch()
	let time = useRef<any>(null)
	useEffect(() => {
		// time.current = setInterval(() => {
		// 	console.log("我是定时器");
		// }, 2000)


		return () => {
			clearInterval(time.current)
			time.current = null
		}
	}, [])

	const clears = () => {
		console.log("我清除了");
		clearInterval(time.current)
		time.current = null
	}

	// useEffect(() => {
	//     const timer = setInterval(() => {
	//         console.log('我是定时器');
	//     }, 1000)
	//     // 清除定时器
	//     return () => clearInterval(timer)
	// }, [])

	const onFinish = (values: SubmitValProps) => {
		console.log('Success:', values);
		// 1=0?
		const { username, password } = values;
		dispatch({
			type: 'login/queryLogin',
			payload: {
				username,
				password
			}
		})
	};

	const onFinishFailed = (errorInfo: any) => {
		console.log('Failed:', errorInfo);
	};



	

	return (
		<div className='login-container'>
			<div className='login-weaper'>
				<div className='login-border'>
					<div className='login-logo'></div>	
					<h1>打钱-伍佰</h1>
					<div>
						<Form
							name="basic"
							labelCol={{ span: 5 }}
							wrapperCol={{ span: 19 }}
							initialValues={{ remember: false }}
							onFinish={onFinish}
							onFinishFailed={onFinishFailed}
						>
							<Item
								label="账号"
								name="username"
								rules={[{ required: true, message: '请输入账号' }]}
							>
								<Input />
							</Item>
							<Item
								label="密码"
								name="password"
								rules={[{ required: true, message: '请输入密码' }]}
							>
								<Input.Password />
							</Item>
							{/* <Item name="remember" valuePropName="checked" wrapperCol={{ offset: 4, span: 20 }}>
                                <Checkbox>记住密码?</Checkbox>
                            </Item> */}

							<Item wrapperCol={{ offset: 4, span: 20 }}>
								<Button type="primary" htmlType="submit" block>
									登录
								</Button>
								{/* <MirrorButton style={{}} onClick={clears}>魔镜</MirrorButton> */}

							</Item>

						</Form>
					</div>
				</div>
			</div>
			{/* <img src={bgImg} alt="" /> */}
		</div>
		
	)
}
export default connect(({ login }: { login: ConnectState }) => ({ login }))(LoginPage);